<!-- 滚动 -->
<template>
  <el-scrollbar height="100%" ref="scrollRef" @scroll="watchscroll" style="position: relative;">
    <div class="relative" ref="contentRef">
      <slot></slot>
    </div>
    <div v-if="showBottom" class="showGoBottom" @click="scrollToBottom">
      <icon name="el-icon-ArrowDown" color="#666" />
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { ref, watch, nextTick} from 'vue';
const props = defineProps({
  isend:{type:Boolean, defualt: false}
})
const content = ref();
const contentRef = ref();
// 监听 内容 的变化
watch( () => content.value,() => {
    nextTick(() => {
      if(isBottom.value){
        scrollRef.value.setScrollTop(contentRef.value.offsetHeight);
      }
    });
  },
  { deep: true }
);
// 监听 props.isend 的变化
watch( () => props.isend, (newVal) => {
    if (newVal) {
      nextTick(() => {
        scrollRef.value?.setScrollTop(contentRef.value.offsetHeight);
      });
    }
  },
  { deep: true }
);
const scrollRef = ref<any>(null);
const showBottom = ref(false); // 回到最底下
const isBottom = ref(true)
const watchscroll = (e:any) => {
  // console.log(e.scrollTop, scrollRef.value.wrapRef.clientHeight, scrollRef.value.wrapRef.scrollHeight)
  showBottom.value = e.scrollTop + scrollRef.value.wrapRef.clientHeight >= scrollRef.value.wrapRef.scrollHeight - 20 ? false : true;
  isBottom.value = !showBottom.value
};
// 滚动到底部的方法
const scrollToBottom = () => {
  if (scrollRef.value && scrollRef.value.setScrollTop) {
    const scrollHeight = scrollRef.value.wrapRef.scrollHeight || 0;
    console.log('----scrollHeight', scrollHeight)
    scrollRef.value.setScrollTop(scrollHeight);
  }
};
const setData = (e:any) => {
  // console.log('1111111111', e)
  content.value = e;
}
defineExpose({
  setData
})
</script>

<style lang="scss" scoped>
.showGoBottom{
  height: 32px; width: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  box-shadow: inset 0 0 0 1px #ededed;
  position: absolute;
  bottom: 50px;
  right: 5px;
  cursor: pointer;
}
</style>